import React, { Component } from 'react'
import{ Row,Col,Icon } from 'antd';
import { Link } from 'react-router-dom'
import 'antd/dist/antd.css';
import { formatSongTime } from '../../../api/formatData';


class SongList extends Component {

    startSongSub = (id) => {
        this.props.startPlaySong(id);
    };

    render() {

        const {songs, total} = this.props;

        // 渲染歌曲列表
        const renderSongs = songs.length > 0
            ?
            songs.map( (item,index)=>{
                return(
                    <Row key={item.songId} style={{ height:"70px",lineHeight:"70px"}}>
                        <Col span={3}>
                            <span style={{ width:"25px",display:"inline-block",textAlign:"center",marginLeft:"10px" }}>
                                {index+1}
                            </span>
                        </Col>
                        <Col span={12} >
                            <Row gutter={10}>
                                <Col span={2} onClick={ ()=>this.startSongSub(item.songId) }>
                                    <span style={{ display:"inline-block",cursor:"pointer" }}>
                                        <Icon type="play-circle" style={{ color:"#B6B6B6",marginRight:"10px" }} />
                                    </span>
                                </Col>
                                <Col span={16} style={{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"inline-block" }}>
                                     <Link style={{ color:"#8E8E8E",marginRight:"5px" }} to={`/song?id=${item.songId}`}>{item.songName}</Link>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={4}>{formatSongTime(item.time)}</Col>
                        <Col span={5} style={{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"inline-block"}}>
                            {
                                item.singer[0]
                                ?
                                <Link to={`/acquire/artist?id=${item.singer[0].singerId}`}>{item.singer[0].singerName}</Link>
                                :
                                null
                            }
                            
                        </Col>
                    </Row>
                )
                            })
            :
            null;

        return (
            <div style={{ marginTop:"30px" }}>
                <div style={{paddingBottom:"5px" }}>
                    <Row >
                        <Col span={4} style={{ fontSize:"20px",color:"#000" }}><span>歌曲列表</span></Col>
                        <Col span={3} style={{ marginTop:"7px" }}><span>{total}首歌</span></Col>
                        <Col span={11}></Col>
                    </Row>
                </div>
                <div style={{ }}>
                    <Row style={{boxShadow:"0px 0px 4px #D3D3D3",height:"34px",lineHeight:"34px" }}>
                        <Col span={3} > </Col>
                        <Col span={12} style={{ borderLeft:"1px solid #D3D3D3",paddingLeft:"5px" }}>标题</Col>
                        <Col span={4} style={{ borderLeft:"1px solid #D3D3D3",paddingLeft:"5px" }}>时长</Col>
                        <Col span={4} style={{ borderLeft:"1px solid #D3D3D3",paddingLeft:"5px" }}>歌手</Col>
                    </Row>
                    {
                        renderSongs
                    }
                </div>
            </div>
        )
    }
}

export default SongList;
